<script lang="ts" setup>
  import { ref } from 'vue';
  import Button from '@sscd/button';
  import Modal from '@sscd/modal';
  const modalText = ref<string>('Content of the modal');
  const visible = ref<boolean>(false);
  const confirmLoading = ref<boolean>(false);
  const showModal = () => {
    visible.value = true;
  };
  const handleOk = () => {
    modalText.value = 'The modal will be closed after two seconds';
    confirmLoading.value = true;
    setTimeout(() => {
      visible.value = false;
      confirmLoading.value = false;
    }, 2000);
  };
</script>

<template>
  <div class="demo">
    <div class="demo-title">异步关闭</div>
    <div class="demo-content">
      <Button type="primary" @click="showModal">Open Modal with async logic</Button>
      <Modal v-model:visible="visible" title="Title" :confirm-loading="confirmLoading" @ok="handleOk">
        <p>{{ modalText }}</p>
      </Modal>
    </div>
  </div>
</template>
